<template>
  <div>
    <RadioGroup v-model="namespaceId" type="button" button-style="solid">
      <Radio :label="item.namespaceId" v-for="(item, index) in namespaceList" :key="index">{{
        item.namespaceName
      }}</Radio>
    </RadioGroup>
  </div>
</template>

<script>
import API from "@/api/historyVersion";
export default {
  name: "NameSpace",
  components: {},
  props: {},
  data() {
    return {
      namespaceList: [],
      namespaceId: ""
    };
  },
  created() {
    this.getNamespace();
  },
  mounted() {},
  methods: {
    getNamespace() {
      API.getNamespace().then(data => {
        this.namespaceList = data.data || [];
        if (this.namespaceList.length) {
          let { namespaceId = "" } = this.$route.query;
          if (namespaceId) {
            this.namespaceId = namespaceId;
          } else {
            this.namespaceId = this.namespaceList[0].namespaceId;
          }
        }
      });
    }
  },
  computed: {},
  watch: {
    namespaceId: {
      handler(val) {
        if (val) {
          this.$emit("clickNamespace", val);
        }
      },
      immediate: true
    }
  }
};
</script>

<style lang='less' scoped >
/deep/ .ivu-radio-group {
  height: auto;
}
.ivu-radio-wrapper {
  margin: 0 4px;
  border: none!important;
  border-radius: 4px;
  background:  #F8F9FA;
  font-size: 12px;
  color: #333333;
  letter-spacing: 0;
  font-weight: 400;
  box-shadow: 0 0 0 0 #fff;
  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
}
.ivu-radio-group-button-solid .ivu-radio-wrapper-checked:not(.ivu-radio-wrapper-disabled) {
    background:  #FFF0ED;
    color: #FF6F4B;
    border-radius: 4px;
    border: none;
    box-shadow: 0 0 0 0 #fff;
}
</style>
